<template>
  <div class="applogin-box">
    <div class="logo-box">
      <!-- <i  style="line-height: 30px;color: #1890ff;font-size: 30px;vertical-align:middle" class="iconfont"  >&#xe605;</i> -->
      <img src="@/images/logo.png" style="width:50px;height:50px" alt="" />
      <div class="logo-name" style="display: inline-block;vertical-align: middle;margin-left: 20px;">
        云车间
      </div>
    </div>
    <div class="login-form-box">
      <a-form :form="form" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" @submit="handleSubmit">
        <a-form-item>
          <a-input
            autocomplete="off"
            v-decorator="['username', { rules: [{ required: true, message: '请输入账号' }] }]"
            placeholder="输入账号"
          />
        </a-form-item>
        <a-form-item>
          <a-input
            autocomplete="off"
            v-decorator="['code', { rules: [{ required: true, message: '请输入验证码' }] }]"
            placeholder="输入验证码"
          />
          <div class="login-getcode" @click="getcode">{{ qrtext }}</div>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 24, offset: 0 }">
          <a-button type="primary" html-type="submit">
            登录
          </a-button>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 24, offset: 0 }">
          <a-button class="tourist-btn" @click="touristslogin">
            游客登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="login-footer">
      <span class="line1">武汉华中数控股份有限公司版权所有</span>
      <span class="line2"><a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备12013633号-2</a></span>
      <span class="line3">技术支持：华中数控股份有限公司 (工业互联网事业部)</span>
    </div>
  </div>
</template>

<script>
import api from '@/api/userConfig';
import lapi from '@/api/login';

import { createNamespacedHelpers } from 'vuex';
const { mapMutations } = createNamespacedHelpers('menu/');
const { mapState } = createNamespacedHelpers('menu/');

export default {
  data() {
    return {
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      code: null,
      qrtext: '获取验证码',
      timeover: true,
    };
  },
  created() {
    document.title = '云管家管理系统';
  },
  computed: {
    ...mapState(['menuLists', 'firstMenuPath']),
  },
  methods: {
    ...mapMutations(['saveMenuLists']),
    getcode() {
      if (!this.timeover) return;
      let username = this.form.getFieldValue('username');
      lapi.getcode({ phone: username }).then((res) => {
        this.timefun();
        this.$message.info(res.MsgDesc);
      });
    },
    timefun() {
      var time = 60;
      var timer;
      let that = this;
      clearInterval(timer);
      timer = setInterval(function() {
        that.timeover = false;
        if (time > 0) {
          time--;
          that.qrtext = time + '秒';
          that.timeover = false;
        } else {
          that.qrtext = '获取验证码';
          that.timeover = true;
          clearInterval(timer);
        }
      }, 1000);
    },
    getRoleId(username) {
      // eslint-disable-next-line no-undef
      api.getRoleId({ phoneNumber: username }).then((res) => {
        if (res.MsgCode != 0) {
          this.$message.error('获取用户信息失败');
          return;
        }
        api
          .getUserResource({
            username: username,
          })
          .then((userResource) => {
            if (userResource.MsgCode != 0) {
              this.$message.error('获取菜单列表失败');
              return;
            }
            localStorage.setItem('userInfo', JSON.stringify({ ...res.Data, username: username }));
            localStorage.setItem('userId', res.Data.ID);
            localStorage.setItem('compid', res.Data.compid);
            localStorage.setItem('userName', username);
            localStorage.setItem('roleId', this.RoleIn(res.Data.compType));
            localStorage.setItem('deadline', res.Data.deadline);

            // 获取当前应用的权限
            let workShopCloudRoutes = userResource.Data.find((item) => {
              return item.appFlag == 'workShopCloud';
            });
            // 存入vux
            console.log('workShopCloudRoutes', workShopCloudRoutes);
            if (workShopCloudRoutes && workShopCloudRoutes.children && workShopCloudRoutes.children.length > 0) {
              this.saveMenuLists(workShopCloudRoutes.children);
              localStorage.setItem('userAuthorization', JSON.stringify(workShopCloudRoutes));
              let path = this.firstMenuPath;
              console.log('path', path);
              this.$router.push(path);
            } else {
              this.$message.error('无权限进入该系统');
            }
          });
      });
    },
    RoleIn(ID) {
      switch (parseInt(ID)) {
        case 1:
          return 3;
        case 2:
          return 2;
        case 3:
          return 1;
        default:
          break;
      }
    },
    touristslogin() {
      this.getRoleId('guest');
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          lapi.login(values).then((res) => {
            if (res.MsgCode == 0) {
              this.getRoleId(values.username);
            } else {
              this.$message.error(res.MsgDesc);
            }
          });

          // console.log("完善信息 ", values);
        }
      });
    },
  },
};
</script>

<style scoped="scoped" lang="less">
@import './style.less';
</style>
